<script setup lang="ts">
import { reactive, computed } from 'vue'
import store from '@/store/index'

const state = reactive({
  tableData: [
    {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
    },
    {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄',
    },
    {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄',
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄',
    },
  ],
  roles: computed(() => store.getters.roles),
})
</script>

<template>
  <div>
    <el-row>
      <el-button v-permission="['role1']">默认按钮{{ state.roles }}</el-button>
      <el-button type="primary" v-permission="['role3']">主要按钮</el-button>
      <el-button type="success" v-permission="['role4']">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <div>
      <el-table :data="state.tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>


<style>
</style>